<template>
  <div class="box">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home/index/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/arrange' }">安排管理</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/arrange/addarrange">安排详情</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 查看安排 -->
    <div v-loading="VLoading" v-if="Isshow == 0" class="describe">
      <el-descriptions class="margin-top" title="安排详情" :column="3" border>
        <template #extra>
          <el-button @click="Aupdate" type="primary">修改</el-button>
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">安排名</div>
          </template>
          {{ Aname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">安排类型</div>
          </template>
          {{ Atype }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">是否需要阅卷</div>
          </template>
          <el-tag size="small">{{ IsChack == true ? "是" : "否" }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">试卷名</div>
          </template>
          {{ TName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">开始时间</div>
          </template>
          {{ begintime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">结束时间</div>
          </template>
          {{ endtime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">描述</div>
          </template>
          {{ PName }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 查看安排 -->
    <!-- 修改安排 -->
    <div v-loading="VLoading" v-if="Isshow == 1" class="describe">
      <el-descriptions class="margin-top" title="安排详情" :column="3" border>
        <template #extra>
          <el-button @click="Asave" type="primary">保存</el-button>
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">安排名</div>
          </template>
          <el-input v-model="Aname" placeholder="Please input" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">安排类型</div>
          </template>
          <el-select v-model="Atype" placeholder="">
            <el-option label="普通安排" value=1 />
            <el-option label="培训班安排" value=2 />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">是否需要阅卷</div>
          </template>
          <el-switch v-model="IsChack" class="ml-2" style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            " />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">试卷名</div>
          </template>
          <el-select v-model="tpname" collapse-tags placeholder="请选择试卷" size="large">
            <el-option v-for="item in tpnames" :key="item.tpid" :label="item.tpname" :value="item.tpid" />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">开始时间</div>
          </template>
          <el-date-picker v-model="begintime" type="datetime" placeholder="开始时间" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">结束时间</div>
          </template>
          <el-date-picker v-model="endtime" type="datetime" placeholder="结束时间" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">描述</div>
          </template>
          <el-input v-model="PName" placeholder="Please input" />
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 修改安排 -->
    <!-- 阅卷 -->
    <div v-if="IsChack == true" class="papers">
      <strong>阅卷</strong>
      <el-table v-loading="VLoading" :data="tableData" border style="width: 100%">
        <el-table-column prop="tpname" label="试卷" />
        <el-table-column prop="uanme" label="姓名" />
        <el-table-column label="标签" width="180">
          <template #default="scope">
            <el-tag>
              {{ scope.row.tplabel == null ? "NULL" : scope.row.tplabel }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="描述" width="180">
          <template #default="scope">
            {{ scope.row.tpexplain == null ? "NULL" : scope.row.tpexplain }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template #default="scope">
            <el-button type="success" @click="papers(scope)" size="small">
              阅卷
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 阅卷 -->
    <!-- 弹出框 -->
    <el-dialog style="height=300px" v-model="dialogFormVisible" :title="TName">
      <div>
        <el-button type="primary" @click="updata" class="lastsave" plain>上传</el-button>
      </div>
      <el-scrollbar height="600px">
        <div class="diaalog">
          <el-collapse v-model="activeName" :accordion="true">
            <el-collapse v-for="(item, index) in ARquestions" :key="item.index">
              <!-- <el-checkbox-group v-model="Ischeck">
                <el-checkbox :label="item.qid" size="large" style="margin-bottom:5px">是否正确</el-checkbox>
              </el-checkbox-group> -->
              <el-tag style="margin-bottom:5px">{{ item.qlable }}</el-tag>
              <div>
                回答：{{ item.answer == "" ? "考生没有回答" : item.answer }}----
                应得分数：
                <el-input-number v-model="item.score" :min="1" :max="item.grade" />
              </div>
              <el-collapse :accordion="true">
                <el-collapse-item :title="
                  index + 1 + '.' + item.qcontent + '(' + item.grade + '分)'
                " :name="item.id">
                  <div style="padding-bottom: 5px">
                    参考答案：{{ item.qanswer }}
                  </div>
                </el-collapse-item>
              </el-collapse>
            </el-collapse>
          </el-collapse>
        </div>
      </el-scrollbar>
    </el-dialog>

    <!-- 弹出框 -->
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { DateliArrange } from "@/utils/Exam/arrange/dateliArrange";
import { GetArranges, TaskPaper } from "@/api/Product/exaam";
import router from "@/router";
import { ElMessage } from "element-plus";

const _exam = new GetArranges();
const _taskpaper = new TaskPaper();

export default defineComponent({
  setup() {
    const data = reactive<DateliArrange>({
      Aid: "",
      Atype: "普通安排",
      tpnames: [],
      tpname: "",
      tpid: "",
      Aname: "XX安排",
      QName: 1,
      TName: "期中考试",
      select1: "",
      select2: "",
      IsChack: true,
      begintime: "",
      endtime: "",
      OName: "技术部",
      PName: "XXX",
      Isshow: 0,
      dialogFormVisible: false,
      Ischeck: [],
      VLoading: false,
      activeName: 0,
      tableData: [],
      ARquestions: [],
      testpaper: [],
      answer: [],
      num: 0,
      grand: [],
    });
    const methods = {
      GetEchoArrange() {
        data.VLoading = true,
          _exam.GetEchoArrange({ aid: data.Aid }).then((res: any) => {
            if (res.code === 0) {
              data.VLoading = false,
                data.Aname = res.data.aname,
                data.Atype = res.data.atype == 1 ? "普通安排" : "培训班安排",
                data.IsChack = res.data.aischeck == 0 ? false : true,
                data.PName = res.data.aexplain,
                data.begintime = res.data.abegintime.replace("T", " "),
                data.endtime = res.data.aendtime.replace("T", " "),
                data.OName = res.data.aorgids,
                data.TName = res.data.atpname,
                data.tpname = res.data.atpid,
                data.tableData = res.data.testpaper,
                res.data.testpaper.forEach((e: any) => {
                  e.question.forEach((d: any) => {
                    data.ARquestions.push({
                      qid: d.qid,
                      qcontent: d.qcontent,
                      grade: d.grade,
                      qanswer: d.qanswer,
                      qlable: d.qlable,
                      answer: d.answer
                    })
                  });

                });
            }
          })
      },
      //修改安排
      Aupdate() {
        data.Isshow = 1;
      },
      Asave() {
        data.VLoading = true;
        let dto = {
          aid: data.Aid,
          aname: data.Aname,
          atype: data.Atype == "培训班安排" ? 2 : 1,
          aischeck: data.IsChack == true ? 1 : 0,
          abegintime: new Date(data.begintime),
          aendtime: new Date(data.endtime),
          atpid: data.tpname,
          aexplain: data.PName
        }
        _exam.UpdateArrange(dto).then((res: any) => {
          if (res.code === 0) {
            data.VLoading = false,
              ElMessage.success(res.message);
            router.push("/arrange");
          } else {
            ElMessage.success(res.message);
          }
        })
      },
      //阅卷
      papers(val: any) {
        data.dialogFormVisible = true;
        data.tpid = val.row.tpid
      },
      updata() {
        data.answer = [];
        data.ARquestions.forEach((e: any) => {
          data.answer.push({
            qid: e.qid,
            score: e.score
          })
        })
        let dto = {
          aid: data.Aid,
          tpid: data.tpid,
          testpaper: data.answer
        }
        _exam.ReviewTestpaper(dto).then((res: any) => {
          console.log(res);
          if (res.code === 0) {
            ElMessage.success(res.message)
            methods.GetEchoArrange();
          } else {
            ElMessage.error(res.message);
          }
        });
      },
      GetTaskPaper() {
        _taskpaper.GetTaskPaper({}).then((res: any) => {
          if (res.code === 0) {
            data.tpnames = res.data.data
          }
        })
      },
      GetEchoTaskPaper() {

      },
    };
    onMounted(() => {
      methods.GetTaskPaper();
      data.Aid = (router.currentRoute.value.params.id).toString();
      methods.GetEchoArrange();
    })
    return {
      ...toRefs(data),
      ...methods,
    };
  },
});
</script>
<style scoped>
.crumbs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.describe {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.papers {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.diaalog {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.lastsave {
  margin: 20px;
  float: right;
}
</style>
